import React from "react"
import { Icon } from 'antd'
import 'styles/financial-account/line-arrow.scss'

const LineArrow = (props) => {
  const { from, to } = props;
  let fromNode = document.querySelector(`#${from}`).getBoundingClientRect();
  let toNode = document.querySelector(`#${to}`).getBoundingClientRect();
  let parentNode = document.querySelector('.view-tree-arrow').getBoundingClientRect();
  let left = (fromNode.right - parentNode.left);
  let top = (Math.min(fromNode.top + fromNode.height / 2, toNode.top + toNode.height / 2) - parentNode.top);
  let right = (toNode.left - parentNode.left);
  let bottom = (Math.max(fromNode.top + fromNode.height / 2, toNode.top + toNode.height / 2) - parentNode.top);
  let conditionClassName = '';
  if(fromNode.top < toNode.top)
    conditionClassName = 'bottom';
  if(fromNode.top > toNode.top)
    conditionClassName = 'top';
  if(fromNode.top === toNode.top)
    conditionClassName = 'straight';
  return (
    <div
      className={`line-arrow ${conditionClassName}`}
      style={{ left, top, width: right - left, height: bottom - top }}
    >
      <div className="arrow">
        <Icon type="caret-right" />
      </div>
    </div>
  )
};

export default LineArrow
